<template>
  <div class="register">
    <section class="form_container">
      <div class="manage_tip">
        <span class="title">水产品大数据管理后台</span>
        <el-form
          :model="loginUser"
          :rules="rules"
          ref="loginForm"
          label-width="100px"
          class="demo-ruleForm registerForm"
        >
          <el-form-item label="邮箱" prop="email">
            <el-input autocomplete="on" v-model="loginUser.email" placeholder="请输入邮箱"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input v-model="loginUser.password" type="password" placeholder="请输入用密码"></el-input>
          </el-form-item>
          <el-form-item style="text-align:left" label="验证码" prop="num">
             <el-input style="width:50%" v-model="loginUser.num" type="text" placeholder="验证码"></el-input>
            <a href="#" rel="external nofollow" @click="editCaptcha">
  <img style="vertical-align:middle" src="http://localhost:5000/users/api/getCaptcha" alt="" ref="imgYzm">
</a>

          </el-form-item>
          <el-form-item>
            <el-button type="primary" class="submit_btn" @click="submitForm('loginForm')">登录</el-button>
          </el-form-item>
          <span class="text">还没有账号？去<a @click.prevent="goRegister">注册</a></span>
        </el-form>
      </div>
    </section>
  </div>
</template>

<script type="text/ecmascript-6">
import { reqLogin } from "../../api";
import md5 from 'md5'
import jwt_decode from 'jwt-decode'

export default {
  data() {
    return {
      loginUser: {
        email: "",
        password: "",
        num:''
      },

      rules: {
        email: [
          {
            type: "email",
            required: true,
            message: "email格式不对",
            trigger: "blur"
          }
        ],
        password: [
          {
            required: true,
            message: "密码不能为空",
            trigger: "blur"
          },
          {
            min: 3,
            max: 18,
            message: "长度在3到18个字符之间",
            trigger: "blur"
          }
        ],
        num:[{
          required:true,
          message: "验证码不能为空",
        }]
      }
    };
  },
  methods: {
    editCaptcha () {
  this.$refs.imgYzm.src = 'http://localhost:5000/users/api/getCaptcha?d='+Math.random()
},
    submitForm(formName) {
      // console.log(formName)
      // console.log(this.$refs[formName])
      this.$refs[formName].validate(valid => {
        if (valid) {

          reqLogin({num:this.loginUser.num,email:this.loginUser.email,password:md5(this.loginUser.password)})
          .then(res => {
            if(res.code==2){
              this.$message({
              message: '验证码错误',
              type: "error"
            });
            return;
            }
            const token = res.data.token
            //存token    
            localStorage.setItem('token',token)  

            //解析token存储到vuex中供个人信息页面直接读取展示信息
            
            localStorage.setItem('token_data',JSON.stringify(jwt_decode(token)))

            this.$message({
              message: '登陆成功',
              type: "success"
            });
            this.$router.replace("/index");


          })
          .catch(err => {
            this.$message.error('登录失败,邮箱或密码不正确')
            console.log(err)
          })

        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    goRegister(){
      this.$router.push('/register')
    }
  },
  components: {}
};
</script>

<style scoped lang="scss">
.register {
  position: relative;
  width: 100%;
  /* height: 100%; */
  height: 100vh;
  background: url(../../assets/bg1.jpg) no-repeat center center;
  background-size: 100% 100%;
}
.form_container {
  width: 370px;
  /* height: 210px; */
  position: absolute;
  top: 15%;
  left: 50%;
  transform: translateX(-50%);
  padding: 25px;
  border-radius: 5px;
  text-align: center;
}
.form_container .manage_tip .title {
  font-family: "Microsoft YaHei";
  font-weight: bold;
  font-size: 26px;
  color: #fff;
}
.registerForm {
  margin-top: 20px;
  background-color: #fff;
  padding: 20px 40px 20px 20px;
  border-radius: 5px;
  box-shadow: 0px 5px 10px #cccc;
}

.submit_btn {
  width: 100%;
}
.text{
  position: absolute;
  right:30px;
  bottom:35px;
  a {
    border-bottom:1px solid blue;
    color:blue;
    
  }
}
</style>
